<template>
    <div class="code-main" v-if="showSourceCodeFlag == 3">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/student/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>{{projectBreadCrumbBack}} - 案例源码</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-main">
            <div class="content-box">
                <!-- <div class="content-title">
                    <img src="./../../assets/images/title_icon13.png" />案例源码
                </div> -->
                <div class="table-content" v-loading="tableLoading">
                    <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                        <el-table-column label="文件夹名称">
                            <template slot-scope="scope">
                                <span style="cursor: pointer;" @click="goLink(scope.row.fileUrl)">{{ scope.row.fileName }}</span>
                                <!-- <router-link :to="{  path:'/teacher/projectSourceCode/second', query: { username: scope.row.fileName }}">{{ scope.row.fileName }}</router-link> -->
                            </template>
                        </el-table-column>
                        <el-table-column  prop="projectInfo" label="案例信息">
                        </el-table-column>
                        <el-table-column prop="gmtModified" label="文件更新时间">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <a :href="scope.row.downloadUrl"><el-button type="text">下载</el-button></a>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-if="tableData.length>0"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pagesize"
                        layout="total, prev, pager, next, jumper"
                        :total="totalCount"
                        style="margin-top: 20px; text-align: center;">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
    <div class="content-main" v-else-if="showSourceCodeFlag == 2"  style="height:100%;">
        <div class="project-tips-box">
            <img src="./../../assets/images/project_tips2.jpg" />
        </div>
    </div>
    <div class="content-main" v-else-if="showSourceCodeFlag == 1"  style="height:100%;">
        <div class="project-tips-box">
            <img src="./../../assets/images/project_tips1.jpg" />
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    import { mapState } from 'vuex'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                projectId: '',
                //面包屑name
                projectBreadCrumbBack: '',
                showSourceCodeFlag: '',
                tableLoading: false,
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.showSourceCodeFlag = this.$store.state.itemServiceValue.showSourceCodeFlag
            this.projectBreadCrumbBack = this.$store.state.projectBreadCrumbBack
            if(this.showSourceCodeFlag == 3){
                this.init() //初始化
            }
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/sourceCode/page?itemId='+self.projectId+'&pageNum='+self.currentPage+'&pageSize='+self.pagesize).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //跳转链接
            goLink(path){
                let self = this
                self.$router.push({
                    path:'/student/projectSourceCode/second',
                    query: { path: path }
                })
            }
        },
        computed:{
			...mapState(['itemServiceValue'])
		}
    }
</script>
